<%--
  Created by IntelliJ IDEA.
  User: 磊布斯
  Date: 2021/10/16
  Time: 15:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%--<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>--%>
<script type="text/javascript" src="../../static/js/jquery-3.3.1.min.js"></script>
<link href="../../static/css/bootstrap.min.css" rel="stylesheet"/>
<script src="../../static/js/bootstrap.min.js" type="text/javascript"></script>

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<%--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">--%>

<%--<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->--%>
<%--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">--%>

<%--<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->--%>
<%--<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>--%>


<script type="text/javascript">
   /* $(document).ready(function(){
        alert(1);
    })*/
</script>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Title</title>
</head>
<body>
<div class="container">
    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <!--标题-->
    <div class="row">
        <div class="col-md-12"><h1>SSM-CRUD</h1></div>
    </div>
    <!--按钮-->
    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary">
                <span class="" aria-hidden="true">新增</span>
            </button>
            <button class="btn btn-danger">
                <span class="">删除</span>
            </button>
        </div>
    </div>
    <%--显示表格数据--%>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover">
                <tr>
                    <th>#</th>
                    <th>empName</th>
                    <th>gender</th>
                    <th>email</th>
                    <th>deptname</th>
                    <th>操作</th>

                </tr>
                <c:forEach items="${pageInfo.list}" var="emp">
                <tr>
                    <th>${emp.empId}</th>
                    <th>${emp.empName}</th>
                    <th>${emp.gender=="M"?"男":"女"}</th>
                    <th>${emp.email}</th>
                    <th>${emp.department.deptName}</th>
                    <th><button class="btn btn-primary btn-sm">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true">编辑</span>
                    </button>
                        <button class="btn btn-danger btn-sm">
                            <span class="glyphicon glyphicon-trash">删除</span>
                        </button>
                    </th>
                </tr>
                </c:forEach>
            </table>
        </div>
    </div>
    <%--显示分页信息--%>
    <div class="col-md-6">
        当前第${pageInfo.pageNum}页,总共${pageInfo.pages}页,总共${pageInfo.total}条记录
    </div>
    <div class="col-md-6"></div>
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li><a href="/emps">首页</a></li>
                <c:if test="${pageInfo.hasPreviousPage}">
                    <li>
                        <a href="/emps?pn=${pageInfo.pageNum-1}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                </c:if>

                <c:forEach items="${pageInfo.navigatepageNums}" var="page_Num">

                        <li <c:if test="${page_Num==pageInfo.pageNum}">
                            class="active"
                        </c:if>><a href="/emps?pn=${page_Num}">${page_Num}</a></li>
                </c:forEach>
                <c:if test="${pageInfo.hasNextPage}">
                    <li>
                        <a href="/emps?pn=${pageInfo.pageNum+1}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </c:if>

                <li><a href="/emps?pn=${pageInfo.pages}">末页</a></li>
            </ul>
        </nav>
</div>
</body>
</html>
